import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, Flex, List, Button, Toast } from 'antd-mobile';
import { Link, routerRedux } from 'dva/router';
import styles from '../scale/styles.less';
import { SCALE_HYP, SCALE_HYP_TITLE } from 'const';

function ScaleHypSheet({ dispatch, scalevalue,form, detail, ...rest }) {
   let questions;
   const { getFieldProps, getFieldValue, setFieldsValue, validateFields, getFieldError } = form;
   let {patientValue} = detail;   
   const { Item } = List; 
   questions = SCALE_HYP;

   patientValue = patientValue.split("|");

   let values = patientValue[0].split(";");
   let values1 = patientValue[1].split(";");
 
   let  normal =[], main=[], tp=[];
  
    for (var i = SCALE_HYP_TITLE.length - 1; i >= 0; i--) {
        for (var k = values.length - 1; k >= 0; k--) {
             if(values[k] == SCALE_HYP_TITLE[i].id ){
              normal.push({id:SCALE_HYP_TITLE[i].id,title:SCALE_HYP_TITLE[i].title})
             }
        }
    }
    for (var i = SCALE_HYP_TITLE.length - 1; i >= 0; i--) {
        for (var k = values1.length - 1; k >= 0; k--) {
             if(SCALE_HYP_TITLE[i].id == values1[k]){
              main.push({id:SCALE_HYP_TITLE[i].id,title:SCALE_HYP_TITLE[i].title})
             }
        }
    }

   function isActive(key, value, i, id) {

    if (Array.from(normal).find(item => item.title === value)) {
      return true;
    }
    if (Array.from(main).find(item => item.title === value)) {
      return true;
    }
    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === id;
  }
   

  return (
    <WingBlank size="md">
        {questions.map((question, id) => (
          <div>
          
          <List>
            <Item>
              {question.title}
            </Item>
         {question.menu.map((question, i) => (
              <List.Item wrap key={question.id}>
                {`${i + 1}. ${question.title}`}
                <List.Item.Brief>
                  <Flex wrap="wrap" className={styles.questionOptions}>
                    {question.item.map((option, ii) => {
                      const key = option.id;
                      const value = option.title;
                      const item = option.id;
                      return (
                        <label key={key} className={cx(styles.questionOption, styles.questionOptionNormal,{ [styles.questionOptionActive]: isActive(key, value, i) })}>
                          <input {...getFieldProps(`${key}`)} type="checkbox" name={key} value={value}   />
                          {value}
                        </label>
                      );
                    })}
                  </Flex>
                </List.Item.Brief>
              </List.Item>
            ))}
          </List>
          <WhiteSpace size="lg" />
            </div>
        ))}
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScaleHypSheet));
